<!doctype html>
<html>
<head>
<mata charset="utf-8">
<title>HTML5 Canvas勾画流程图</title>
<style type="text/css">
body{background-color:#bbb;}
#canvas{background-color:#fff;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600">
<p> :(真的很抱歉~  <br> 您是不是用的悲催的IE8？您的浏览器不支持HTML5 canvas，试试更换成Chrome,FireFox,IE9...</p>
</canvas>
<input id="point" type="text" />
<script>
//定义节点颜色。蓝、绿色、红
var colors = new Array("rgba(0, 0, 255, 0.5)", "rgba(0, 255, 0, 0.5)", "rgba(255, 0, 0 , 0.5)");
//定义节点
function Point() {
  this.x = 0;
  this.y = 0;
  this.radii = 0;
  this.color = "";
}
//初始化节点数据
function getPoints() {
  var point = new Array();
  point[0] = new Point();
  point[0].x = 200;
  point[0].y = 20;
  point[0].radii = 10;
  point[0].color = colors[0];
  point[1] = new Point();
  point[1].x = 200;
  point[1].y = 120;
  point[1].radii = 10;
  point[1].color = colors[1];
  point[2] = new Point();
  point[2].x = 317;
  point[2].y = 120;
  point[2].radii = 10;
  point[2].color = colors[1];
  point[3] = new Point();
  point[3].x = 99;
  point[3].y = 279;
  point[3].radii = 10;
  point[3].color = colors[2];
  point[4] = new Point();
  point[4].x = 408;
  point[4].y = 279;
  point[4].radii = 10;
  point[4].color = colors[2];
  point[5] = new Point();
  point[5].x = 408;
  point[5].y = 535;
  point[5].radii = 10;
  point[5].color = colors[2];
  return point;
}
//定义常用方法类
function Utils() {};
Utils.captureMouse = function(element) {
  var mouse = {
    x: 0,
    y: 0
  };
  element.addEventListener('click',
  function(event) {
    var x, y;
    if (event.pageX || event.pageY) {
      x = event.pageX;
      y = event.pageY;
    } else {
      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
    mouse.x = x;
    mouse.y = y;
    document.getElementById("point").value = "x=" + mouse.x + ";y=" + mouse.y;
  },
  false);
  return mouse;
};
//定义箭头线条
function Arrow() {
  this.start_x = 0;
  this.start_y = 0;
  this.end_x = 0;
  this.end_y = 0;
  this.length = 0; //两点之间的长度
  this.radii = 0; //圆点的半径
  this.arrow_len = 10; //箭头的长度
  this.color = "#ffff00";
  this.rotation = 0;
}
Arrow.prototype.draw = function(context) {
  context.save();
  context.translate(this.start_x, this.start_y);
  context.rotate(this.rotation);
  context.lineWidth = 2;
  context.fillStyle = this.color;
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(0, -2);
  context.lineTo( - (this.length - this.radii - this.arrow_len), -2);
  context.lineTo( - (this.length - this.radii - this.arrow_len), -4);
  context.lineTo( - (this.length - this.radii), 0);
  context.lineTo( - (this.length - this.radii - this.arrow_len), 4);
  context.lineTo( - (this.length - this.radii - this.arrow_len), 2);
  context.lineTo(0, 2);
  context.closePath();
  context.stroke();
  context.restore();
};
window.onload = function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext('2d');
  var mouse = Utils.captureMouse(canvas)
  //绘制节点和线条
  var point = getPoints();
  for (var i = 0; i < point.length - 1; i++) {
    //绘制节点
    context.fillStyle = point[i].color;
    context.beginPath();
    context.arc(point[i].x, point[i].y, point[i].radii, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    //绘制线条
    var arrow = new Arrow();
    arrow.start_x = point[i].x;
    arrow.start_y = point[i].y;
    arrow.end_x = point[i + 1].x;
    arrow.end_y = point[i + 1].y;
    arrow.radii = point[i + 1].radii;
    var dy = arrow.start_y - arrow.end_y;
    var dx = arrow.start_x - arrow.end_x;
    arrow.rotation = Math.atan2(dy, dx);
    if (dy == 0) arrow.length = Math.abs(dx);
    else if (dx == 0) arrow.length = Math.abs(dy);
    else arrow.length = Math.sqrt(dx * dx + dy * dy);
    arrow.draw(context);
    //如果是最后一个节点了，则绘制出来
    if (i == point.length - 2) {
      context.fillStyle = point[i + 1].color;
      context.beginPath();
      context.arc(point[i + 1].x, point[i + 1].y, point[i + 1].radii, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();
    }
  }
}
</script>
</body>
</html>